<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#e90101"/>
    <title>音乐鉴赏与分享平台</title>
    <meta name="author" content="Themezinho">
    <meta name="description" content="For all kind of video streaming website">
    <meta name="keywords"
          content="digiflex, video, movie, show, tv, watch, online, streaming, stream, ads, trailer, imdb, dram, action, hollywood, cinema, rate">

    <!-- SOCIAL MEDIA META -->
    <meta property="og:description" content="digiflex | Online Movie Streaming">
    <meta property="og:image" content="http://www.themezinho.net/digiflex/preview.png">
    <meta property="og:site_name" content="digiflex">
    <meta property="og:title" content="digiflex">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.themezinho.net/digiflex">

    <!-- TWITTER META -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@digiflex">
    <meta name="twitter:creator" content="@digiflex">
    <meta name="twitter:title" content="digiflex">
    <meta name="twitter:description" content="digiflex | Online Movie Streaming">
    <meta name="twitter:image" content="http://www.themezinho.net/digiflex/preview.png">

    <!-- FAVICON FILES -->

    <link rel="stylesheet" href="layui/css/layui.css">

    <link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon" sizes="144x144">
    <link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon" sizes="114x114">
    <link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon" sizes="72x72">
    <link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon">
    <link href="ico/favicon.png" rel="shortcut icon">

    <!-- CSS FILES -->
    <link rel="stylesheet" href="css/lineicons.css">
    <link rel="stylesheet" href="css/fancybox.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>

<div id="iframetop">
</div>

<header class="page-header">
    <div class="container">
        <h4 style="text-align: center"></h4>
    </div>
</header>



<!-- end slider -->
<main>
    <section class="content-section">
        <div class="container" id="app">
            <div class="row">
                <div class="col-12">
                    <div class="section-title">
                        <h4>音乐榜单</h4>
                    </div>
                </div>


                <div class="layui-row  layui-col-space1">
                    <div class="layui-col-md6">
                        <div class="grid-demo grid-demo-bg1">
                            <table class="layui-table" lay-skin="line" style="width: 100%">
                                <thead>
                                <tr>
                                    <th colspan="5">评分榜单</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(movie,i) in pfpdlist" v-if="i<10">
                                    <td><span class="layui-badge">{{i+1}}</span></td>
                                    <td><a :href="['moviedetails.html?id='+movie.id]"><img :src="['upload/'+movie.filename]" alt="Image" style="width: 50px;height: 50px"></a></td>
                                    <td><a :href="['moviedetails.html?id='+movie.id]">{{movie.name}}</a></td>
                                    <td>{{movie.author}}</td>
                                    <td><span class="layui-badge layui-bg-orange">{{movie.score}}分</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="grid-demo">
                            <table class="layui-table" lay-skin="line" style="width: 100%">
                                <thead>
                                <tr>
                                    <th colspan="5">收听榜单</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(movie,i) in bfpdlist" v-if="i<10">
                                    <td><span class="layui-badge">{{i+1}}</span></td>
                                    <td><a :href="['moviedetails.html?id='+movie.id]"><img :src="['upload/'+movie.filename]" alt="Image" style="width: 50px;height: 50px"></a></td>
                                    <td><a :href="['moviedetails.html?id='+movie.id]">{{movie.name}}</a></td>
                                    <td>{{movie.author}}</td>
                                    <td><span class="layui-badge layui-bg-orange">{{movie.cs}}次</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>

        </div>
        <!-- end container -->
    </section>
    <footer class="footer">
        <!-- end container -->
        <div class="bottom-bar" id="iframefoot">
            <!-- end container -->
        </div>
        <!-- end bottom-bar -->
    </footer>
    <!-- end footer -->
</main>

<!-- JS FILES -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/fancybox.min.js"></script>
<script src="js/scripts.js"></script>


<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>

<script type="text/javascript">
    var qs = Qs
    var pageNum = UrlParam.paramValues("pageNum")==null?1:UrlParam.paramValues("pageNum").toString()
    var key = UrlParam.paramValues("key")==null?"":UrlParam.paramValues("key").toString()
    var key1 = UrlParam.paramValues("key1")==null?"":UrlParam.paramValues("key1").toString()
    var key2 = UrlParam.paramValues("key2")==null?"":UrlParam.paramValues("key2").toString()
    var key3 = UrlParam.paramValues("key3")==null?"":UrlParam.paramValues("key3").toString()

    var vmm = new Vue({
        el:"#app",
        data:{
            pfpdlist:[],
            bfpdlist:[],
        },
        mounted(){
            this.getphblist()
        },
        methods:{

            getphblist() {
                axios.post('queryPD',qs.stringify({
                })).then(response =>{
                    this.pfpdlist = response.data.pfpdlist
                    this.bfpdlist = response.data.bfpdlist
                    console.log(this.movielist)
                }).catch(error =>{
                    console.log(error)
                })
            },




        }
    })
    window.onload = function(){
        $("#iframetop").load("top.html")
        $("#iframefoot").load("foot.html")

    }
</script>
</body>
</html>